<template>
    <div>
        <el-container style="height: 10%">
            <el-header>
                    <el-row style="padding: 10px; background: linear-gradient(89deg, rgb(56 162 249), rgb(155 255 255))" justify="space-between">
                        <el-col :span="4">
                            <span style="font-size: 20px; font-weight: 1000; color: white">
                                <el-icon><HomeFilled /></el-icon>{{$t('组织机构')}}
                            </span>
                        </el-col>
                        <el-col :span="20">
                            <el-row justify="end" :gutter="10">
                                <el-button v-loading="channelStore.loadding" type="primary" :icon="Plus" round @click="add()">{{ $t('新增') }} </el-button>
                                <!-- <el-button v-loading="channelStore.loadding" color="#00b794" :icon="Document" round>{{ $t('Excel导出') }} </el-button>
                                <el-button v-loading="channelStore.loadding" type="primary" :icon="Document" color="#00b794" round style="margin-right: 10px"> {{ $t('Excel导入') }} </el-button> -->
                                <!-- <UiSet></UiSet> -->
                            </el-row>
                        </el-col>
                    </el-row>
            </el-header>
          <el-container>
                <el-aside width="350px" height="90vh" style="background-color: white; border: 0.1px solid #ccc">
                    <channel ref="childRef" isformmodel="true" />
                </el-aside>
                <el-main height="100%;" style="background-color: white" v-loading="channelStore.loadding">
                    <div>
                        <el-form :model="formdata" label-width="150" style="max-width: 600px">
                            <el-form-item :label="$t('机构编号')">
                                <el-input v-model="formdata.channelid" />
                            </el-form-item>
                            <el-form-item :label="$t('机构名称')">
                                <el-input v-model="formdata.name" />
                            </el-form-item>
                            <el-form-item :label="$t('机构简称')">
                                <el-input v-model="formdata.shortname" />
                            </el-form-item>
                            <el-form-item :label="$t('中文地址')">
                                <el-input v-model="formdata.chinaladdress" />
                            </el-form-item>
                            <el-form-item :label="$t('英文地址')">
                                <el-input v-model="formdata.engaddress" />
                            </el-form-item>
                            <el-form-item :label="$t('纳税号')">
                                <el-input v-model="formdata.playtaxid" />
                            </el-form-item>
                            <el-form-item :label="$t('备注')">
                                <el-input v-model="formdata.des" type="textarea" />
                            </el-form-item>
                            <el-form-item>
                                <div>
                                    <el-button type="primary" @click="onSubmit">{{ $t('保存') }}</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { httpSend } from '../../utils/api';
import { onMounted, ref, reactive, watch ,getCurrentInstance} from 'vue';
import { useI18n } from 'vue-i18n';
import { Setting, Document,Plus } from '@element-plus/icons-vue';
import channel from '@/components/share/channel.vue';
import UiSet from '@/components/share/UiSet.vue';
//@ts-ignore
import { usechannelStore } from '@/store';
import { chkgrant } from '@/globalmethods'; /*通用方法*/
const channelStore = usechannelStore() as any;
const { t } = useI18n(); //多语言
// 引用子组件
const childRef = ref(null);
const deptloading = ref(false);
let formdata: any = reactive({});
const { appContext } = getCurrentInstance();
const ElMessage = appContext.config.globalProperties.$ElMessage;
// 监听计算属性的变化以更新本地状态
watch(
    () => channelStore.form,
    (newData) => {
        if (newData) {
            formdata.id = newData.id;
            formdata.channelid = newData.channelid;
            formdata.name = newData.name;
            formdata.shortname = newData.shortname;
            formdata.chinaladdress = newData.chinaladdress;
            formdata.engaddress = newData.engaddress;
            formdata.playtaxid = newData.playtaxid;
            formdata.isvirtual = newData.isvirtual;
            formdata.isuse = newData.isuse;
            formdata.des = newData.des;
        } else {
            for (let key in formdata) {
                if (formdata.hasOwnProperty(key)) {
                    formdata[key] = null;
                }
            }
        }
    }
);

onMounted(() => {
      
});

const add=()=>{
    if (!chkgrant('组织机构', 'savechannel')) {
        ElMessage.warning(t('您暂无保存权限,请联系管理员!'));
        return;
    }
    channelStore.setform(null);
    channelStore.setid(null);
    channelStore.setname(null);
}

const onSubmit = () => {
    if (childRef.value) {
        childRef.value.onSubmit(formdata); // 调用子组件的 onSubmit 方法
    } else {
        console.log('子组件不存在');
    }
};
</script>
<style scoped>
.el-aside {
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: auto;
    width: var(--el-aside-width, 300px);
    height: 97vh;
}

:deep(.el-header) {
    --el-header-padding: 0 20px;
    --el-header-height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    height: auto;
    padding: 0;
}
</style>
